'use client'

import {
    Attachments,
    Bubble,
    Conversations,
    Prompts,
    Sender,
    Welcome,
    useXAgent,
    useXChat,
} from '@ant-design/x';
import React, {useEffect} from 'react';

import {
    CloudUploadOutlined,
    CommentOutlined,
    // EllipsisOutlined,
    FireOutlined,
    HeartOutlined,
    PaperClipOutlined,
    PlusOutlined,
    ReadOutlined,
    // ShareAltOutlined,
    SmileOutlined,
} from '@ant-design/icons';
import {Badge, Button, type GetProp, Space} from 'antd';
import {Attachment} from '@ant-design/x/es/attachments';
import {PromptProps} from "@ant-design/x/es/prompts";

const renderTitle = (icon: React.ReactElement, title: string) => (
    <Space align="start">
        {icon}
        <span>{title}</span>
    </Space>
);

const defaultConversationsItems = [
    {
        key: '0',
        label: 'New Conversation 0',
    },
];

const placeholderPromptsItems: GetProp<typeof Prompts, 'items'> = [
    {
        key: '1',
        label: renderTitle(<FireOutlined style={{color: '#FF4D4F'}}/>, 'Hot Topics'),
        description: 'What are you interested in?',
        children: [
            {
                key: '1-1',
                description: `What's new in X?`,
            },
            {
                key: '1-2',
                description: `What's AGI?`,
            },
            {
                key: '1-3',
                description: `Where is the doc?`,
            },
        ],
    },
    {
        key: '2',
        label: renderTitle(<ReadOutlined style={{color: '#1890FF'}}/>, 'Design Guide'),
        description: 'How to design a good product?',
        children: [
            {
                key: '2-1',
                icon: <HeartOutlined/>,
                description: `Know the well`,
            },
            {
                key: '2-2',
                icon: <SmileOutlined/>,
                description: `Set the AI role`,
            },
            {
                key: '2-3',
                icon: <CommentOutlined/>,
                description: `Express the feeling`,
            },
        ],
    },
];

const senderPromptsItems: GetProp<typeof Prompts, 'items'> = [
    {
        key: '1',
        description: 'Hot Topics',
        icon: <FireOutlined style={{color: '#FF4D4F'}}/>,
    },
    {
        key: '2',
        description: 'Design Guide',
        icon: <ReadOutlined style={{color: '#1890FF'}}/>,
    },
];

const roles: GetProp<typeof Bubble.List, 'roles'> = {
    ai: {
        placement: 'start',
        typing: {step: 5, interval: 20},
        styles: {
            content: {
                borderRadius: 16,
            },
        },
    },
    local: {
        placement: 'end',
        variant: 'shadow',
    },
};

export default function Independent() {
//     // ==================== State ====================
    const [headerOpen, setHeaderOpen] = React.useState(false);

    const [content, setContent] = React.useState('');

    const [conversationsItems, setConversationsItems] = React.useState(defaultConversationsItems);

    const [activeKey, setActiveKey] = React.useState(defaultConversationsItems[0].key);

    const [attachedFiles, setAttachedFiles] = React.useState<GetProp<typeof Attachments, 'items'>>(
        [],
    );

    // ==================== Runtime ====================
    const [agent] = useXAgent({
        request: async ({message}, {onSuccess}) => {
            onSuccess(`Mock success return. You said: ${message}`);
        },
    });

    const {onRequest, messages, setMessages} = useXChat({
        agent,
    });

    useEffect(() => {
        if (activeKey !== undefined) {
            setMessages([]);
        }
    }, [activeKey, setMessages]);

//     // ==================== Event ====================
    const onSubmit = (nextContent: string) => {
        if (!nextContent) return;
        onRequest(nextContent);
        setContent('');
    };

    const onPromptsItemClick = (info: {
        data: PromptProps;
    }) => {
        onRequest(info.data.description as string);
    };

    const onAddConversation = () => {
        setConversationsItems([
            ...conversationsItems,
            {
                key: `${conversationsItems.length}`,
                label: `New Conversation ${conversationsItems.length}`,
            },
        ]);
        setActiveKey(`${conversationsItems.length}`);
    };

    const onConversationClick: GetProp<typeof Conversations, 'onActiveChange'> = (key: React.SetStateAction<string>) => {
        setActiveKey(key);
    };

    const handleFileChange = (info: { fileList: React.SetStateAction<Attachment[]>; }) =>
        setAttachedFiles(info.fileList);

    // ==================== Nodes ====================
    const placeholderNode = (
        <Space direction="vertical" size={16} className="pt-8 w-full">
            <Welcome
                variant="borderless"
                icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
                title="Hello, I'm Navcoo Chat"
                description="我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~"
                // extra={
                //     <Space>
                //         <Button icon={<ShareAltOutlined/>}/>
                //         <Button icon={<EllipsisOutlined/>}/>
                //     </Space>
                // }
            />
            <Prompts
                title="Do you want?"
                items={placeholderPromptsItems}
                styles={{
                    list: {
                        width: '100%',
                    },
                    item: {
                        flex: 1,
                    },
                }}
                onItemClick={onPromptsItemClick}
            />
        </Space>
    );

    const items: GetProp<typeof Bubble.List, 'items'> = messages.map(({id, message, status}) => ({
        key: id,
        loading: status === 'loading',
        role: status === 'local' ? 'local' : 'ai',
        content: message,
    }));

    const attachmentsNode = (
        <Badge dot={attachedFiles.length > 0 && !headerOpen}>
            <Button type="text" icon={<PaperClipOutlined/>} onClick={() => setHeaderOpen(!headerOpen)}/>
        </Badge>
    );

    const senderHeader = (
        <Sender.Header
            title="Attachments"
            open={headerOpen}
            onOpenChange={setHeaderOpen}
            styles={{
                content: {
                    padding: 0,
                },
            }}
        >
            <Attachments
                beforeUpload={() => false}
                items={attachedFiles}
                onChange={handleFileChange}
                placeholder={(type) =>
                    type === 'drop'
                        ? {title: 'Drop file here'}
                        : {
                            icon: <CloudUploadOutlined/>,
                            title: 'Upload files',
                            description: 'Click or drag files to this area to upload',
                        }
                }
            />
        </Sender.Header>
    );

    const logoNode = (
        <div className="flex h-16 items-center box-border py-6 gap-4 mx-4">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
                src="https://cdn.deepseek.com/logo.png"
                draggable={false}
                alt="logo"
                className="h-6"
            />
            <span className="text-black font-bold">Navcoo Chat</span>
        </div>
    );

    // ==================== Render =================
    return (
        <div className="w-full min-w-full h-screen flex bg-white rounded-2xl">
            <div className="bg-stone-50 w-72 h-full flex flex-col">
                {/*🌟 Logo*/}
                {logoNode}
                {/* 🌟 添加会话 */}
                <Button
                    onClick={onAddConversation}
                    className="m-3 mt-0 mb-6"
                    icon={<PlusOutlined/>}
                >
                    New Conversation
                </Button>
                {/* 🌟 会话管理 */}
                <Conversations
                    items={conversationsItems}
                    className="px-3 flex-1 overflow-auto"
                    activeKey={activeKey}
                    onActiveChange={onConversationClick}
                />
            </div>
            <div className="h-full w-full max-w-3xl my-0 mx-auto flex flex-col gap-4 box-border p-6 rounded-2xl">
                {/* 🌟 消息列表 */}
                <Bubble.List
                    items={items.length > 0 ? items : [{content: placeholderNode, variant: 'borderless'}]}
                    roles={roles}
                    className="flex-1 w-full"
                />
                {/* 🌟 提示词 */}
                <Prompts items={senderPromptsItems} onItemClick={onPromptsItemClick}/>
                {/* 🌟 输入框 */}
                <Sender
                    value={content}
                    header={senderHeader}
                    onSubmit={onSubmit}
                    onChange={setContent}
                    prefix={attachmentsNode}
                    loading={agent.isRequesting()}
                    className="shadow-xl"
                />
            </div>
        </div>
    );
};